<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="parentVisible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="500px"
  >
    <el-form
      ref="parentForm"
      :model="parentForm"
      :rules="rules"
    >
      <el-form-item
        label="一级品类："
        label-width="120px"
        prop="name"
      >
        <el-input
          v-model="parentForm.name"
          autocomplete="off"
        />
      </el-form-item>
      <!-- <el-form-item
        label="上传封面："
        label-width="120px"
        prop="image"
      >
        <crop-upload
          show-type="photo"
          :init-val="parentForm.image"
          file-size="100K"
          wrapper-width="95px"
          wrapper-height="95px"
          @setVal="(val) => setUrl(val)"
        />
      </el-form-item> -->
      <!-- <el-form-item>
        <div style="color:red;margin-left:120px">缩略图尺寸要求为 宽：200px，高：20px</div>
      </el-form-item> -->
      <el-form-item
        label="图片链接："
        label-width="120px"
        prop="link"
      >
        <el-input
          v-model="parentForm.link"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="状态:"
        label-width="110px"
        prop="enabled"
      >
        <el-radio
          v-model="parentForm.enabled"
          :label="1"
        >显示</el-radio>
        <el-radio
          v-model="parentForm.enabled"
          :label="0"
        >隐藏</el-radio>
      </el-form-item>
      <el-form-item
        label="排序："
        label-width="120px"
        prop="displayorder"
      >
        <el-input
          v-model="parentForm.displayorder"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button
        type="primary"
        :loading="isSubmit"
        @click="submitForm('parentForm')"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: {
    dialogTitle: {
      type: String
    },
    parentVisible: {
      type: Boolean,
      default: false
    },
    parentForm: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    var checkNum = (rule, value, callback) => {
      const reg = /^[0-9]\d*$/
      if (!value && value !== 0) {
        callback(new Error('请输入数字'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    return {
      isSubmit: false,
      rules: {
        name: [
          { required: true, message: '请输入一级品类名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        enabled: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        // link: [
        //   { required: true, message: '请输入链接', trigger: 'blur' }
        // ],
        // image: [
        //   { required: true, message: '请上传封面', trigger: 'change' }
        // ],
        displayorder: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    parentVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.parentForm.clearValidate()
        })
      }
    }
  },
  methods: {
    closeDialog(param) {
      this.$emit('closeDialog', param)
    },
    setUrl(val) {
      this.parentForm.image = val
      this.$emit('setUrl', val)
    },
    submitForm(formName) {
      this.isSubmit = true
      var strRegex = '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'
      this.$refs[formName].validate((valid) => {
        debugger
        if (valid) {
          // var reg = new RegExp(strRegex)
          // if (this.parentForm.link) {
          //   if (!reg.test(this.parentForm.link)) {
          //     this.$message.error('请确保图片链接正确')
          //     return false
          //   } else {
          //     this.$emit('submitForm', true)
          //   }
          // }
          this.$emit('submitForm', true)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
</style>
